import 'package:blurrycontainer/blurrycontainer.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:e_book/utils/header_util.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class MyBookDetailAppbar extends StatefulWidget {
  final Widget? topActions;
  final String cover;
  final String title;
  final String subtitle;
  const MyBookDetailAppbar(
      {super.key,
      this.topActions,
      required this.cover,
      required this.title,
      required this.subtitle});

  @override
  State<MyBookDetailAppbar> createState() => _MyBookDetailAppbarState();
}

class _MyBookDetailAppbarState extends State<MyBookDetailAppbar> {
  final GlobalKey _key = GlobalKey();
  double? _coverWidth; // 封面宽度
  @override
  Widget build(BuildContext context) {
    // 监听widget渲染完成
    WidgetsBinding.instance.addPostFrameCallback((duration) {
      RenderBox? box = _key.currentContext?.findRenderObject() as RenderBox?;
      if (_coverWidth == null) {
        _coverWidth = box?.size.width;
        // 通知组件更新
        setState(() {});
      }
    });
    return AppBar(
      elevation: 0,
      automaticallyImplyLeading: false,
      backgroundColor: Colors.transparent,
      surfaceTintColor: Colors.transparent,
      flexibleSpace: Stack(
        children: [
          // 背景封面
          Container(
            width: double.infinity,
            decoration: BoxDecoration(
              image: DecorationImage(
                image: CachedNetworkImageProvider(
                  widget.cover,
                  headers: HeaderUtil.randomHeader(),
                ),
                fit: BoxFit.cover,
              ),
            ),
          ),

          // 遮罩
          Container(
            width: double.infinity,
            decoration: BoxDecoration(
              color: Colors.black.withOpacity(0.2),
            ),
          ),

          // 前景

          SizedBox(
            width: double.infinity,
            child: Stack(
              children: [
                // 模糊背景
                BlurryContainer(
                  borderRadius: BorderRadius.zero,
                  child: Container(),
                ),

                Padding(
                  // 安全区域距离
                  padding:
                      EdgeInsets.only(top: MediaQuery.of(context).padding.top),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      // leading 、action
                      widget.topActions ?? const SizedBox(),

                      // 书籍封面
                      Expanded(
                        child: Padding(
                          padding: EdgeInsets.only(bottom: 15.h, left: 15.w),
                          child: Stack(
                            children: [
                              // 使用AspectRatio widget来确保其子组件在一个特定的宽高比内显示
                              // 这里设置的宽高比为3:4
                              AspectRatio(
                                aspectRatio: 3 / 4,
                                // 子组件是一个Container，它将根据父组件AspectRatio指定的宽高比调整自己的大小
                                child: Container(
                                  key:
                                      _key, // 为Container指定一个全局键，以便在不同上下文中唯一标识这个widget
                                  // 使用BoxDecoration来定义Container的背景
                                  decoration: BoxDecoration(
                                    // 设置Container的边框为圆角边框，圆角半径为4.r (responsive unit)
                                    borderRadius: BorderRadius.circular(4.r),
                                    // 使用DecorationImage为Container设置背景图片
                                    image: DecorationImage(
                                      // 背景图片通过网络路径获取，并使用CachedNetworkImageProvider以提高性能和管理缓存
                                      image: CachedNetworkImageProvider(
                                          widget.cover,
                                          headers: HeaderUtil.randomHeader()),
                                      // 背景图片的适应方式为覆盖整个Container
                                      fit: BoxFit.cover,
                                    ),
                                  ),
                                ),
                              ),
                              // 书籍标题
                              // 书籍副标题

                              Container(
                                margin: EdgeInsets.only(left: _coverWidth ?? 0),
                                child: _getTitle(),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ],
                  ),
                )
              ],
            ),
          )
        ],
      ),
    );
  }

  Widget _getTitle() {
    return Padding(
      padding: EdgeInsets.only(left: 15.w),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 书籍标题
          Text(
            widget.title,
            maxLines: 2,
            overflow: TextOverflow.ellipsis,
            style: TextStyle(
              fontSize: 16.sp,
              fontWeight: FontWeight.w600,
              color: Theme.of(context).colorScheme.onPrimary,
            ),
          ),
          // 书籍副标题
          6.verticalSpace,
          Text(
            widget.subtitle,
            maxLines: 2,
            overflow: TextOverflow.ellipsis,
            style: TextStyle(
              fontSize: 16.sp,
              fontWeight: FontWeight.w600,
              color: Theme.of(context).colorScheme.onPrimary,
            ),
          ),
        ],
      ),
    );
  }
}
